<template>
  <div class="createDemand login complaint">
    <van-row type="flex">
      <van-col
        span="24"
        class="title"
      >
        投诉原因
      </van-col>
    </van-row>
    <div class="checkbox">
      <div
        @click="select(item.id)"
        :class="{ active: form.reason.indexOf(item.id) != -1 }"
        v-for="(item,index) in arr"
        :key="index"
      >
        <span :class="{ active2: form.reason.indexOf(item.id) != -1 }">{{ item.name }}</span>
      </div>
    </div>
    <div class="desc">
      <div class="content3 font400 color3">
        备注说明
      </div>
      <van-field
        class="textarea"
        v-model="form.remark"
        type="textarea"
        :autosize="{ minHeight: 120 }"
        placeholder="请填写投诉说明内容"
      />
    </div>
    <UploadImg
      :file-list="form.morepic"
      :count="6"
      :type="2"
      @uploaderImgs="uploaderImgs"
      @detaleImgs="detaleImgs"
    />
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4"
      >
        提交
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { reasonList, complaint } from '@/api/index'
import { Dialog, Toast } from 'vant'
const UploadImg = defineAsyncComponent(() => import('@/components/UploadImg/index.vue'))
const store = useStore()
const router = useRouter()
const route = useRoute()
const arr: any = ref()
const form: any = ref({
  morepic: [],
  reason: [],
  remark: ''
})

const getType = async () => {
  arr.value = await reasonList({ demand_id: route.query.id })
}

getType()

onMounted(() => {
  document.body.style.background = '#fff'
})

onUnmounted(() => {
  document.body.style.background = '#f7f7f7'
})

const uploaderImgs = (val:any, type:any) => {
  if (type === 2) {
    form.value.morepic = val
  }
}

const detaleImgs = (i:any, detail:any) => {
  form.value.morepic.splice(detail.index, 1)
}

const select = async (name: any) => {
  if (form.value.reason.indexOf(name) !== -1) {
    form.value.reason.splice(form.value.reason.indexOf(name), 1)
  } else {
    form.value.reason.push(name)
  }
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = _.throttle(async () => {
  try {
    await complaint({ demand_id: route.query.id, ...form.value })
    Dialog.alert({
      message: '您的投诉已提交',
      confirmButtonColor: '#FF7A1F'
    }).then(() => {
      back()
    })
  } catch (error: any) {
    Toast(error.message)
  }
}, 2000)

</script>

<style lang="less" scoped>
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 240px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}
.createDemand {
    padding: 30px 30px 15px;
    .desc {
        background-color: #f7f7f7;
        padding: 15px;
        padding-left: 15px;
        border-radius: 5px;
        .content3 {
            margin-bottom: 15px;
        }
    }
    .uploaderTop {
        margin-top: 10px;
    }
    .uploader {
        width: 75px;
        height: 75px;
        background: #f7f7f7;
        // border-radius: 5px;
        text-align: center;
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 13px;
        }
    }
}
.checkbox {
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin: 10px 0;
    span {
        color: #363739;
        font-size: 14px;
    }
}

.checkbox div {
    // width: 30%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px 5px;
    color: #454757;
    border:1px solid #454757;
    padding: 0 5px;
}

.active {
    background-color: #FF7A1F !important;
    border:1px solid #FF7A1F !important;
    // border:1.5px solid rgba(203,4,35,1) !important;
}

.active2 {
    color: #fff !important;
    font-weight: 400;
}

@media (min-width: 750px) {
  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 375px;
    transform: translateX(-50%);
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 240px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}
.createDemand {
    padding: 30px 30px 15px;
    .desc {
        background-color: #f7f7f7;
        padding: 15px;
        padding-left: 15px;
        border-radius: 5px;
        .content3 {
            margin-bottom: 15px;
        }
    }
    .uploaderTop {
        margin-top: 10px;
    }
    .uploader {
        width: 75px;
        height: 75px;
        background: #f7f7f7;
        // border-radius: 5px;
        text-align: center;
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 13px;
        }
    }
}
.checkbox {
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin: 10px 0;
    span {
        color: #363739;
        font-size: 14px;
    }
}

.checkbox div {
    // width: 30%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px 5px;
    color: #454757;
    border:1px solid #454757;
    padding: 0 5px;
}

.active {
    background-color: #FF7A1F !important;
    border:1px solid #FF7A1F !important;
    // border:1.5px solid rgba(203,4,35,1) !important;
}

.active2 {
    color: #fff !important;
    font-weight: 400;
}
}
</style>
